<!DOCTYPE html>
<!-- saved from url=(0048)https://www.erdangjiade.com/modals/44/4445/demo/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>乐淘淘CMS管理员登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            background: #fff url(asset/image/backgroud.png) 50% 50% no-repeat;
            background-size: cover;
        }

        .dowebok {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 430px;
            height: 550px;
            margin: -300px 0 0 -215px;
            border: 1px solid #fff;
            border-radius: 20px;
            overflow: hidden;
        }

        .logo {
            width: 104px;
            height: 104px;
            margin: 50px auto 80px;
            background: url(asset/image/login.png) 0 0 no-repeat;
        }

        .form-item {
            position: relative;
            width: 360px;
            margin: 0 auto;
            padding-bottom: 30px;
        }

        .form-item input {
            width: 288px;
            height: 48px;
            padding-left: 70px;
            border: 1px solid #fff;
            border-radius: 25px;
            font-size: 18px;
            color: #fff;
            background-color: transparent;
            outline: none;
        }

        .form-item button {
            width: 360px;
            height: 50px;
            border: 0;
            border-radius: 25px;
            font-size: 18px;
            color: #1f6f4a;
            outline: none;
            cursor: pointer;
            background-color: #fff;
        }

        #email {
            background: url(asset/image/emil.png) 20px 14px no-repeat;
        }

        #password {
            background: url(asset/image/password.png) 23px 11px no-repeat;
        }

        .tip {
            display: none;
            position: absolute;
            left: 20px;
            top: 52px;
            font-size: 14px;
            color: #f50;
        }

        .reg-bar {
            width: 360px;
            margin: 20px auto 0;
            font-size: 14px;
            overflow: hidden;
        }

        .reg-bar a {
            color: #fff;
            text-decoration: none;
        }

        .reg-bar a:hover {
            text-decoration: underline;
        }

        .reg-bar .reg {
            float: left;
        }

        .reg-bar .forget {
            float: right;
        }

        .dowebok ::-webkit-input-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        .dowebok :-moz-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        .dowebok ::-moz-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        .dowebok :-ms-input-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        @media screen and (max-width: 500px) {
            * {
                box-sizing: border-box;
            }

            .dowebok {
                position: static;
                width: auto;
                height: auto;
                margin: 0 30px;
                border: 0;
                border-radius: 0;
            }

            .logo {
                margin: 50px auto;
            }

            .form-item {
                width: auto;
            }

            .form-item input, .form-item button, .reg-bar {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="dowebok">
    <div class="logo"></div>
    <form>
        <div class="form-item">
            <input class="email ipt" id="email" name="email" type="email" placeholder="邮箱" autocomplete="off">

        </div>
        <div class="form-item">
            <input class="password ipt" name="pwd" id="password" type="password" autocomplete="off" placeholder="登录密码">

        </div>
    </form>
    <div class="form-item">
        <button id="submit_btn">登 录</button>
    </div>
</div>
<script src="asset/plugin/jquery/jquery.min.js"></script>
<script type="text/javascript" src="asset/plugin/jquery/jquery.form.js"></script>
<script type="text/javascript" src="asset/plugin/jquery/tooltips.js"></script>
<script type="text/javascript">
    //支持Enter键登录
    document.onkeydown = function (e) {
        if (!e) e = window.event;
        if ((e.keyCode || e.which) == 13) {
            var obtnLogin = document.getElementById("submit_btn")
            obtnLogin.focus();
        }
    }

    $(function () {
        //提交表单
        $('#submit_btn').click(function () {
            show_loading();
            var myReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮件正则
            if ($('.email').val() == '') {
                show_err_msg('邮箱还没填呢！');
                $('.email').focus();
            } else if (!myReg.test($('.email').val())) {
                show_err_msg('您的邮箱格式错咯！');
                $('.email').focus();
            } else if ($('.password').val() == '') {
                show_err_msg('密码还没填呢！');
                $('.password').focus();
            } else {
                $.ajax({
                    url: "http://localhost:8080/admin/login",
                    data: $("form").serialize(),
                    type: "POST",
                    dataType: "JSON",
                    success: function (dto) {
                        //如果成功
                        if (dto.code == 1000) {
                            //ajax提交表单
                            show_msg('正在登录...', 'index.html');
                        } else if (dto.code == 2001) {
                            show_err_msg('账号无效！');
                        } else if (dto.code == 2002) {
                            show_err_msg('密码错误！');
                        }
                    }
                })
                //取消执行事件
                return false;
            }
        });
    });
</script>

</body>
</html>